<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org"
      xmlns:sec="http://www.thymeleaf.org/extras/spring-security">
<body>
<!--Loading Start-->
<div class="loader" th:fragment="loading">
    <div class="spinner">
        <img th:src="@{/static/picture/loader.gif}" alt="">
    </div>
</div>

<!-- Header Start -->
<header class="header-wrapper main-header" th:fragment="header">
    <div class="header-inner-wrapper">
        <div class="logo-wrapper">
            <a href="" class="admin-logo">
                <img th:src="@{/static/picture/logo.png}" alt="">
            </a>
        </div>
        <div class="header-right">

            <div class="header-left">
                <div class="header-links">
                    <a href="javascript:void(0);" class="toggle-btn">
                        <span></span>
                    </a>
                </div>
            </div>
            <div class="header-controls">
                <div class="user-info-wrapper header-links">
                    <a href="javascript:void(0);" class="user-info">
                        <img th:src="@{/static/picture/user.jpg}" alt="" class="user-img">
                        <div class="blink-animation">
                            <span class="blink-circle"></span>
                            <span class="main-circle"></span>
                        </div>
                    </a>
                    <div class="user-info-box">
                        <div class="drop-down-header">
                            <h4 th:text="${user.getUsername()}">用户名</h4>
                            <p th:text="${user.getRole().equals('user')?'学生':'管理员'}">角色</p>
                        </div>
                        <ul>
                            <li>
                                <a href="person">
                                    <i class="far fa-edit"></i> 编辑
                                </a>
                            </li>
                            <li>
                                <a th:href="@{/api/auth/logout}">
                                    <i class="fas fa-sign-out-alt"></i> 退出
                                </a>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
</header>

<!-- Sidebar Start -->
<aside class="sidebar-wrapper" th:fragment="aside">
    <div class="side-menu-wrap">
        <ul class="main-menu">
            <!--admin-->
            <li sec:authorize="hasRole('admin')">
                <a th:href="@{/page/admin/index}" class="active">
                            <span class="icon-menu feather-icon">
                                <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" fill="none"
                                     stroke="currentColor" stroke-width="2" stroke-linecap="round"
                                     stroke-linejoin="round" class="feather feather-home">
                                    <path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path>
                                    <polyline points="9 22 9 12 15 12 15 22"></polyline>
                                </svg>
                            </span>
                    <span class="menu-text">借阅管理</span>
                </a>
            </li>
            <li sec:authorize="hasRole('admin')">
                <a th:href="@{/page/admin/book}">
                            <span class="icon-menu feather-icon">
                                <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" fill="none"
                                     stroke="currentColor" stroke-width="2" stroke-linecap="round"
                                     stroke-linejoin="round" class="feather feather-package">
                                    <line x1="16.5" y1="9.4" x2="7.5" y2="4.21"></line>
                                    <path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"></path>
                                    <polyline points="3.27 6.96 12 12.01 20.73 6.96"></polyline>
                                    <line x1="12" y1="22.08" x2="12" y2="12"></line>
                                </svg>
                            </span>
                    <span class="menu-text">图书管理</span>
                </a>
            </li>
            <!--user-->
            <li sec:authorize="hasRole('user')">
                <a th:href="@{/page/user/index}">
                            <span class="icon-menu feather-icon">
                                <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" fill="none"
                                     stroke="currentColor" stroke-width="2" stroke-linecap="round"
                                     stroke-linejoin="round" class="feather feather-package">
                                    <line x1="16.5" y1="9.4" x2="7.5" y2="4.21"></line>
                                    <path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"></path>
                                    <polyline points="3.27 6.96 12 12.01 20.73 6.96"></polyline>
                                    <line x1="12" y1="22.08" x2="12" y2="12"></line>
                                </svg>
                            </span>
                    <span class="menu-text">图书借阅</span>
                </a>
            </li>
            <li sec:authorize="hasRole('user')">
                <a th:href="@{/page/user/book}">
                            <span class="icon-menu feather-icon">
                                <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" fill="none"
                                     stroke="currentColor" stroke-width="2" stroke-linecap="round"
                                     stroke-linejoin="round" class="feather feather-package">
                                    <line x1="16.5" y1="9.4" x2="7.5" y2="4.21"></line>
                                    <path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"></path>
                                    <polyline points="3.27 6.96 12 12.01 20.73 6.96"></polyline>
                                    <line x1="12" y1="22.08" x2="12" y2="12"></line>
                                </svg>
                            </span>
                    <span class="menu-text">借阅管理</span>
                </a>
            </li>
            <!--<li>
                <a href="students">
                        <span class="icon-menu feather-icon">
                            <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" fill="none"
                                 stroke="currentColor" stroke-width="2" stroke-linecap="round"
                                 stroke-linejoin="round" class="feather feather-users">
                                <path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path>
                                <circle cx="9" cy="7" r="4"></circle>
                                <path d="M23 21v-2a4 4 0 0 0-3-3.87"></path>
                                <path d="M16 3.13a4 4 0 0 1 0 7.75"></path>
                            </svg>
                        </span>
                    <span class="menu-text">学生列表</span>
                </a>
            </li>-->
        </ul>
    </div>
</aside>

<!-- Footer Start -->
<div class="ad-footer-btm" th:fragment="footer">
    <p>Copyright © 2022.Company name All rights reserved.
        <a target="_blank" href="https://gitee.com/Luckyzhao1/book-manage-spring-mvc">图书管理系统</a>
    </p>
</div>

<!-- Color Setting -->
<div id="style-switcher" th:fragment="colorSetting">
    <div>
        <ul class="colors">
            <li>
                <p class='colorchange' id='color'>
                </p>
            </li>
            <li>
                <p class='colorchange' id='color2'>
                </p>
            </li>
            <li>
                <p class='colorchange' id='color3'>
                </p>
            </li>
            <li>
                <p class='colorchange' id='color4'>
                </p>
            </li>
            <li>
                <p class='colorchange' id='color5'>
                </p>
            </li>
            <li>
                <p class='colorchange' id='style'>
                </p>
            </li>
        </ul>
    </div>
    <div class="bottom">
        <a href="" class="settings">
            <i class="fa fa-cog" aria-hidden="true"></i>
        </a>
    </div>
</div>

</body>
</html>